<template>
  <s-layout title="" :bgStyle="{ color: '#090909' }">
    <view class="car-bg ss-flex ss-col-bottom ss-row-center">下单成功</view>
    <view class="successful">

      <view class="serialNumber">
        <view class="text-1">尊贵的购车会员，您的购车编号
          <text>2401025893</text>
        </view>
        <view class="text-2 ss-flex ss-col-bottom ss-row-center">
          <view>第</view>
          <view>9</view>
          <view>位</view>
        </view>
        <view class="text-3">您目前提车排队</view>
        <view class="btn">返回首页</view>
      </view>
      <view class="rule">
        <view class="title">提车规则</view>
        <view class="content">
          <view>提车方案</view>
          <view>方案一：公司每新增13位购车用户，则排列第1位的用户即可提车，以此类推。</view>
          <view>方案二：成功分享3位89888元购车用户，即可快速提车。</view>
          <view>
            方案三：成为城市合伙人，即可获得4辆车参与排队（我司将会在1个月左右的时间内交付第一辆车，剩余3辆可参考上述方案1和方案2）。
          </view>
          <view>方案四：成为联创股东即可获得一辆车（一个月左右交付）。</view>
          <view>注：满足提车条件后我司将在1个月左右的时间将车交付。</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>

</script>

<style lang="scss" scoped>
  .car-bg{
    font-weight: 600;
    font-size: 23px;
    color: #FFFFFF;
    height: 150px;
    background: url("@/static/img/car-bg.png") no-repeat center;
    background-size: 100% 127px;
    background-position: 0 0;
  }
  .successful {
    padding: 15px 15px 110px;
    box-sizing: border-box;

    .serialNumber {
      text-align: center;
      background: #1C1C1E;
      border-radius: 10px;
      padding: 28px 18px;
      box-sizing: border-box;
      margin-bottom: 11px;
      .text-1 {
        font-weight: 400;
        font-size: 15px;
        color: #BABABA;

        text {
          color: #13C093;
        }
      }

      .text-2 {
        margin: 22px 0 14px;
        view{
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          &:nth-child(2){
            font-weight: 500;
            font-size: 43px;
            color: #13C093;
            line-height: 45px;
            background: linear-gradient(0deg, #45C9F0 0%, #36F6AF 99.365234375%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .text-3 {
        font-weight: 400;
        font-size: 14px;
        color: #BABABA;
      }

      .btn {
        margin-top: 23px;
        height: 50px;
        line-height: 50px;
        border-radius: 25px;
        border: 1px solid #3de1cd;
        font-weight: 400;
        font-size: 16px;
        color: #090909;
        background: linear-gradient(0deg, #45C9F0 0%, #36F6AF 99.365234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .rule {
      padding: 20px;
      box-sizing: border-box;
      background: #1C1C1E;
      border-radius: 10px;

      .title {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 14px;
      }

      .content {
        font-weight: 400;
        font-size: 15px;
        color: #BABABA;

      }
    }
  }


</style>
